<template>
  <div>
    <div class="myhome-die-tab-myxin" v-if="idshow">
      <div class="div_one">
        <div>{{parsedetail.article_title}}</div>
        <div>
          <span>{{parsedetail.article_update_time}}</span>
          <span>
            <img src="http://www.zhaoshengku.net/wx-yuedu.png" alt />
            <span>{{parsedetail.article_views}}</span>
          </span>
        </div>
      </div>
      <div class="div_two">
        <wxParse :content="parsedetail.article_content" />
      </div>
      <div id="baomingcss">
        <div class="baom" @click="baomFunc">报名</div>
        <div class="hezuo" @click="hezuoFunc">合作</div>
      </div>
      <p class="bg"></p>
      <div class="div_str">
        <p>
          <span>评论</span>
          <span></span>
        </p>
        <p class="span_input_p">
          <input type="text" class="input_p" v-model.lazy="pinglunIvalue" placeholder="请输入评价内容" />
          <span class="span_p" @click="fabupL(0,1,0)">发布</span>
        </p>
        <ul>
          <li v-for="(item,index) in plList" :key="index">
            <p>
              <img :src="item.info_avatar" alt />
              <span>{{item.info_nick}}</span>
            </p>
            <p>{{item.comment_msg}}</p>
            <p>
              <span>{{item.comment_time}}</span>
              <span @click="plIsshows(item.comment_upid,index,0)">
                <img
                  src="http://www.zhaoshengku.net/wx-%E4%BF%A1%E6%81%AF%20%E6%8B%B7%E8%B4%9D%206.png"
                  alt
                />
                <span>{{item.children.length}}</span>
              </span>
              <span @click="dianZanclickss(item.comment_id,index,0)">
                <img
                  :src="!item.my_comment_num  ||  item.my_comment_num==0?'https://www.zhaoshengku.net/bianzujjjlik.png':'https://www.zhaoshengku.net/likelanwoxihuan.png'"
                  alt
                  v-if="dianzanlis!=index"
                />
                <img src="http://www.zhaoshengku.net/wx-dianzanline.png" alt v-else />
                <span>{{item.laudCount}}</span>
              </span>
            </p>
            <p class="span_input_p" v-if="isshow==index">
              <input
                type="text"
                class="input_p"
                v-model.lazy="pinglunIvalues"
                placeholder="请输入评价内容"
              />
              <span class="span_p" @click="fabupL(1,4,item.comment_id,index)">发布</span>
            </p>
            <div class="div" v-if="isshow==index">
              <ul>
                <li v-for="(items,indexs) in item.children" :key="indexs">
                  <p>
                    <img :src="items.info_avatar" alt />
                    <span>
                      <span>
                        {{items.info_nick}}
                        <!-- <span v-show="items.comment_member_id==optionId">(作者)</span> -->
                      </span>
                      <span>回复了</span>
                      <span>{{item.info_nick}}</span>
                    </span>
                  </p>
                  <p>{{items.comment_msg}}</p>
                  <p>
                    <span>{{items.comment_time}}</span>
                    <span @click="dianZanclickss(items.comment_id,indexs,1,index)">
                      <img
                        :src="!items.my_comment_num  ||  items.my_comment_num==0?'https://www.zhaoshengku.net/bianzujjjlik.png':'https://www.zhaoshengku.net/likelanwoxihuan.png'"
                        alt
                        v-if="dianzanlisChould!=indexs"
                      />
                      <img src="http://www.zhaoshengku.net/wx-dianzanline.png" alt v-else />
                      <span>{{items.laudCount}}</span>
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="jiaz" v-else>正在加载中.....</div>
  </div>
</template>

<script>
import wxParse from "mpvue-wxparse";
export default {
  components: {
    wxParse
  },
  data() {
    return {
      parsedetail: {},
      pinglunIvalue: "",
      optionId: 0,
      plList: {},
      isshow: -1,
      huifuPl: [],
      headerCode: "",
      dianzanlis: -1,
      dianzanlisChould: -1,
      nameWenzhang: -1,
      pinglunIvalues: "",
      idshow: false,
      pagenum: 1,
      pinisxiala: false
    };
  },
  onLoad(option) {
    this.idshow = false;
    console.log("1")
    this.pagenum = 1;
    this.pinisxiala = false;
    this.isshow = -1;
    wx.showToast({
      title: "",
      icon: "loading",
      duration: 1000,
      mask: true
    });
    // 获取文章详情
    this.optionId = option.id;
    this.nameWenzhang = option.name;
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getarticleone",
      method: "post",
      data: {
        id: option.id
      },
      success: res => {
        this.parsedetail = res.data.data;
        this.idshow = true;
        this.parsedetail.article_update_time = this.parsedetail.article_update_time.substring(
          0,
          10
        );
        wx.hideToast();
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
    // 获取评论列表
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getcomment",
      method: "post",
      header:{
         Authorization: "Bearer " + this.headerCode
      },
      data: {
        pagenum: this.pagenum,
        pagesize: 10,
        comment_type: 1,
        comment_fromid: option.id,
      },
      success: res => {
        if (res.data.code == 200) {
          console.log(res);
          this.plList = res.data.data.data;
          this.plList.forEach(element => {
            element.comment_time = element.comment_time.substring(0, 10);
            if (element.children.length > 0) {
              element.children.forEach(res => {
                res.comment_time = res.comment_time.substring(0, 10);
              });
            }
          });
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
    // 获取token
    wx.getStorage({
      key: "koken",
      success: res => {
        this.headerCode = res.data;
      }
    });
    this.optionname = option.names;
  },
  methods: {
    // 报名
    baomFunc(id) {
      if (this.optionname == 0) {
        wx.redirectTo({
          url:
            "/pages/myhomeEducat/main?enlist_article_id=" +
            this.optionId +
            "&name=" +
            this.nameWenzhang +
            "&ymz=3"
        });
      } else if (this.optionname == 1) {
        wx.redirectTo({
          url:
            "/pages/myhomeEducat/main?enlist_article_id=" +
            this.optionId +
            "&name=" +
            this.nameWenzhang +
            "&ymz==2"
        });
      }
    },
    // 合作
    hezuoFunc() {
      wx.redirectTo({
        url:
          "/pages/myhomeEducat/main?enlist_article_id=" +
          this.optionId +
          "&name=" +
          this.nameWenzhang +
          "&ymz=4"
      });
    },
    // 点赞
    dianZanclickss(id, e, t, i) {
      var _this = this;
      if (id == undefined) {
        wx.showToast({
          title: "点赞成功",
          icon: "true",
          duration: 1000,
          mask: true
        });
        if (t == 0) {
          if (_this.plList[e].laudCount == 0) {
            _this.plList[e].laudCount = _this.plList[e].laudCount + 1;
            _this.plList[e].my_comment_num = 1;
          } else {
            _this.plList[e].laudCount = _this.plList[e].laudCount - 1;
            _this.plList[e].my_comment_num = 0;
          }
        } else if (t == 1) {
          if (_this.plList[i].children[e].laudCount == 0) {
            _this.plList[i].children[e].laudCount =
              _this.plList[i].children[e].laudCount + 1;
            _this.plList[i].children[e].my_comment_num = 1;
          } else {
            _this.plList[i].children[e].laudCount =
              _this.plList[i].children[e].laudCount - 1;
            _this.plList[i].children[e].my_comment_num = 0;
          }
        }

        return;
      }
      wx.request({
        url: "https://api.zhaoshengku.net/index/comment/setlaud",
        method: "post",
        data: {
          comment_id: id,
          oper_type: "add"
        },
        header: {
          Authorization: "Bearer " + this.headerCode
        },
        success: res => {
          if (res.data.code == 40003) {
            wx.showToast({
              title: "操作频繁,请稍后重试",
              icon: "none",
              duration: 1000,
              mask: true
            });
            return;
          }
          if (res.data.code == 200) {
            if (res.data.msg == "取消点赞") {
              if (t == 0) {
                _this.plList[e].laudCount = _this.plList[e].laudCount - 1;
                _this.plList[e].my_comment_num = 0;
              } else if (t == 1) {
                _this.plList[i].children[e].laudCount =
                  _this.plList[i].children[e].laudCount - 1;
                _this.plList[i].children[e].my_comment_num = 0;
              }
            }
          } else {
            wx.showToast({
              title: "点赞成功",
              icon: "true",
              duration: 1000,
              mask: true
            });
            if (t == 0) {
              _this.plList[e].laudCount = _this.plList[e].laudCount + 1;
              _this.plList[e].my_comment_num = 1;
            } else if (t == 1) {
              _this.plList[i].children[e].laudCount =
                _this.plList[i].children[e].laudCount + 1;
              _this.plList[i].children[e].my_comment_num = 1;
            }
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 发布评论
    fabupL(e, int, sid, ind) {
      var comment_msg;
      if (e == 0) {
        comment_msg = this.pinglunIvalue;
      } else if (e == 1) {
        comment_msg = this.pinglunIvalues;
      }
      if (comment_msg == "") {
        wx.showToast({
          title: "您还未输入评价内容",
          icon: "none",
          duration: 1000
        });
      }
      wx.request({
        url: "https://api.zhaoshengku.net/index/comment/setComment",
        method: "post",
        data: {
          oper_type: "add",
          comment_type: int,
          comment_msg: comment_msg,
          comment_fromid: this.optionId,
          comment_upid: sid
        },
        header: {
          Authorization: "Bearer " + this.headerCode
        },
        success: res => {
          if (res.data.msg == "登陆过期") {
            wx.navigateTo({
              url: "/pages/loginRegister/main"
            });
          }
          if (res.data.code == 200) {
            var util = require("../../utils/index.js");
            if (e == 0) {
              this.plList.push({
                info_avatar: this.$store.state.myxinxi.info_avatar,
                info_nick: this.$store.state.myxinxi.info_nick,
                laudCount: 0,
                comment_msg: this.pinglunIvalue,
                comment_time: util.formatDate(new Date()),
                children: []
              });
            } else if (e == 1) {
              this.plList[ind].children.push({
                info_avatar: this.$store.state.myxinxi.info_avatar,
                info_nick: this.$store.state.myxinxi.info_nick,
                laudCount: 0,
                comment_msg: this.pinglunIvalues,
                comment_time: util.formatDate(new Date())
              });
            }
            this.pinglunIvalue = "";
            this.pinglunIvalues = "";
            wx.showToast({
              title: "评论成功！",
              icon: "true",
              duration: 1000
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    plIsshows(e, id) {
      console.log("1111");
      this.isshow = id;
    }
  },
  mounted() {
    wx.setNavigationBarTitle({
      title: "项目详情"
    });
  },
  onHide() {

  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.pinisxiala) {
      return;
    }
    wx.showToast({
      title: "",
      icon: "loading",
      duration: 5000
    });
    this.pagenum++;
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getcomment",
      method: "post",
      header:{
         Authorization: "Bearer " + this.headerCodes
      },
      data: {
        pagenum: this.pagenum,
        pagesize: 10,
        comment_type: 1,
        comment_fromid: this.optionId,
      },
      success: res => {
        console.log(res);
        if (res.data.code == 200) {
          wx.hideToast();
          console.log(res);
          if (res.data.data.data.length > 0) {
            this.plList = this.plList.concat(res.data.data.data);
            this.plList.forEach(element => {
              element.comment_time = element.comment_time.substring(0, 10);
              if (element.children.length > 0) {
                element.children.forEach(res => {
                  res.comment_time = res.comment_time.substring(0, 10);
                });
              }
            });
          } else {
            wx.showToast({
              title: "暂时没有更多评论！",
              icon: "none",
              duration: 1500
            });
            this.pinisxiala = true;
            return;
          }
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
  },
  // 分享
  onShareAppMessage: function(res) {
    var _this = this;
    return {
      title: this.parsedetail.article_title,
      path: "/pages/ProjectDetails/main?id=" + this.optionId+"&name="+this.nameWenzhang,
      imageUrl:"https://www.zhaoshengku.net/fenxiangbeijingdetu.jpg",
      success: function(res) {
        wx.showToast({
          title: "转发成功",
          icon: "true",
          duration: 1000,
          mask: true
        });
      },
      fail: function(res) {
        wx.showToast({
          title: "转发失败",
          icon: "none",
          duration: 1000,
          mask: true
        });
      }
    };
  }
};
</script>

<style scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.jiaz {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  color: #666;
  font-size: 26rpx;
}
.myhome-die-tab-myxin > .div_two {
  background: #fff;
  padding: 0 35rpx 50rpx 35rpx;
  box-sizing: border-box;
}
.bg {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
  margin-top: 40rpx;
}
.myhome-die-tab-myxin > .div_two > div {
  margin-bottom: 40rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 34rpx;
}
.myhome-die-tab-myxin > .div_two > div:nth-child(2) {
  width: 100%;
  height: 320rpx;
}
.myhome-die-tab-myxin > .div_two > div:nth-child(2) img {
  width: 100%;
  height: 320rpx;
}
.myhome-die-tab-myxin > .div_two > div:last-child {
  margin: 0;
}
.myhome-die-tab-myxin > .div_one {
  background: #fff;
  padding: 50rpx 35rpx;
  box-sizing: border-box;
}
.myhome-die-tab-myxin > .div_one > div:nth-child(1) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.myhome-die-tab-myxin > .div_one > div:nth-child(2) {
  margin-top: 31rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.myhome-die-tab-myxin > .div_one > div:nth-child(2) img {
  width: 26rpx;
  height: 16rpx;
  margin-right: 10rpx;
}
.myhome-die-tab-myxin > .div_str {
  background: #fff;
  margin-top: 10rpx;
  padding: 40rpx 26rpx 0 30rpx;
}
.myhome-die-tab-myxin > .div_str > p:nth-child(1) {
  display: flex;
  align-items: center;
}
.myhome-die-tab-myxin > .div_str > p:nth-child(1) > span:nth-child(1) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-right: 83rpx;
}
.myhome-die-tab-myxin > .div_str > p:nth-child(1) > span:nth-child(2) {
  display: inline-block;
  flex: 1;
  height: 1rpx;
  background: #dddddd;
}
.myhome-die-tab-myxin > .div_str > ul > li > p {
  display: flex;
  align-items: center;
}
.myhome-die-tab-myxin > .div_str > ul > li > p:nth-child(1) > img:nth-child(1) {
  width: 49rpx;
  height: 49rpx;
  border-radius: 50%;
  margin-right: 11rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(2) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(34, 151, 212, 1);
  margin-right: 28rpx;
  flex:1;
}
.myhome-die-tab-myxin > .div_str > ul > li > p:nth-child(1) > img:nth-child(3) {
  width: 15rpx;
  height: 22rpx;
  margin-right: 10rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(4) {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.myhome-die-tab-myxin > .div_str > ul > li {
  margin-top: 30rpx;
  border-bottom: 1rpx solid #dddddd;
  padding-bottom: 23rpx;
}
.myhome-die-tab-myxin > .div_str > ul > li:last-child {
  border: none;
}
.myhome-die-tab-myxin > .div_str > ul > li > p:nth-child(2) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  margin-left: 60rpx;
  margin-top: 15rpx;
}
.myhome-die-tab-myxin > .div_str > ul > li > p:nth-child(3) {
  justify-content: flex-end;
  margin-top: 30rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(1) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  margin-right: 18rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(2)
  > img,
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(3)
  > img {
  width: 35rpx;
  height: 35rpx;
  margin-right: 5rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(2)
  > span,
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(3)
  > span {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(2) {
  margin-right: 10rpx;
  display: flex;
  align-items: center;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(3) {
  display: flex;
  align-items: center;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div {
  background: #eeeeee;
  padding: 0 20rpx;
  margin-top: 25rpx;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li {
  padding-bottom: 31rpx;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li:first-child {
  margin-top: 0;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li > p {
  display: flex;
  align-items: center;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li > p:nth-child(1) {
  padding-top: 32rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > img:nth-child(1) {
  width: 49rpx;
  height: 49rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(2) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(34, 151, 212, 1);
  margin-right: 21rpx;
  flex:1;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > img:nth-child(3) {
  width: 15rpx;
  height: 22rpx;
  margin-right: 10rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(4) {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li > p:nth-child(2) {
  margin-left: 60rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  margin-top: 10rpx;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li > p:nth-child(3) {
  margin-top: 15rpx;
  justify-content: flex-end;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(1) {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  margin-right: 22rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(2)
  > img {
  width: 24rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(3)
  > span:nth-child(2)
  > span {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li {
  border-bottom: 1rpx solid #bebebe;
}
.myhome-die-tab-myxin > .div_str > ul > li > .div > ul > li:last-child {
  border: none;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(2)
  > span {
  margin-right: 20rpx;
}
.myhome-die-tab-myxin
  > .div_str
  > ul
  > li
  > .div
  > ul
  > li
  > p:nth-child(1)
  > span:nth-child(2)
  > span:nth-child(2) {
  color: rgba(102, 102, 102, 1);
}
.input_p {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  background: #e5e5e5;
  padding: 0 10rpx;
  border-radius: 10rpx 0 0 10rpx;
}
.span_input_p {
  width: 100%;
  display: flex;
  height: 60rpx;
  margin: 10rpx 0;
}
.span_input_p > .span_p {
  display: inline-block;
  width: 130rpx;
  height: 60rpx;
  background: #1aad19;
  line-height: 60rpx;
  text-align: center;
  border-radius: 0 10rpx 10rpx 0;
  color: #fff;
  font-size: 26rpx;
}
#baomingcss {
  width: 685rpx;
  height: 97rpx;
  color: #fff;
  margin: 0 auto;
  font-size: 36rpx;
  display: flex;
  align-items: center;
}
#baomingcss > div {
  flex: 1;
  height: 97rpx;
  line-height: 97rpx;
  text-align: center;
}
#baomingcss > .baom {
  background: #2297d4;
  border-radius: 40rpx 0 0 40rpx;
}
#baomingcss > .hezuo {
  background: #1aad19;
  border-radius: 0rpx 40rpx 40rpx 0rpx;
}
</style>
